<template>
    <div>
        <div class="nav_list">
            <div class="nav_item" 
                v-for="(item, index) in tabList" 
                @click="changeNav(item, index)"
                :key="index" :class="{active: item.value == actTab}">
                <span>{{item.label}}</span>
            </div>
        </div>

        <div v-if="actTab != '01' && scroll.noData" class="initing">文章正在生成中，请稍后~</div>

        <div class="art_list" v-for=" item in artList" :key="item.id" @click="toEdit(item.id)">
            <div class="title">{{item.title}}</div>
            <div class="content">{{item.content}}</div>
            <div class="op flex">
                <i class="icon-view">{{item.avilible}}</i>
                <i class="icon-share1">{{item.shareCount}}</i>
                <!-- <time>{{item.createTime}}</time> -->
                <div class="real_op flex">
                    <i class="edit icon-edit"></i>
                    <i @click.stop="delArtItem(item)" class="delete icon-delete3"></i>
                </div>
            </div>
        </div>
        <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>

        <div class="add_art" @click="toEdit()">+新增正文</div>

    </div>
</template>

<script>
import { getCodeContents, editCodeContents } from '@/request/house'
export default {
    name: "",
    components: {},
    data() {
        return {
            codeId: '',
            actTab: '',
            tabList: [
                { label: '全部', value: ''},
                { label: '未分享', value: '00'},
                { label: '已分享', value: '01'},
            ],
            artList: [],
            scroll: {
                page: 1,
                size: 14,
                loading: false,
                max: false,
                noData: false,
            },
            
        }
    },
    onLoad({ codeId }) {
        this.codeId = codeId
        this.onRefresh()
    
    },
    onReachBottom() {
        this.onInfinite()
    },
    methods: {
        changeNav(item) {
            this.actTab = item.value
            this.onRefresh()
        },
        getArtList(complete) {
            getCodeContents({
                codeId: this.codeId,
                shareFlag: this.actTab, //00未分享，01已分享
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                if(this.scroll.page == 1) {
                    this.artList = res.data.list
                } else {
                    this.artList = this.artList.concat(res.data.list)
                }
                this.scroll.max = this.artList.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getArtList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getArtList(() => {
                this.scroll.loading = false
            })
        },
        async delArtItem(item) {
            let action = await this.$interact.modal({
                title: '提示',
                content: '确定删除？',
                showCancel: true
            })
            if(!action.confirm) return;
            editCodeContents({
                id: item.id,
                delStatus: '01'
            }).then(res => {
                this.$interact.toast(res.msg)
                this.onRefresh()
            })

        },
        toEdit(id) {
            let path = '/pages/admin/house/editArticle?codeId=' + this.codeId
            if(id) {
                path += ('&id=' + id)
            }
            this.$navigate.to(path)
        }
    
    }
}
</script>
<style lang="less" scoped>
.nav_list{
    display: flex;
    align-items: center;
    height: 90rpx;
    .nav_item{
        height: 100%;
        flex-shrink: 0;
        padding: 0 20rpx;
        font-size: 34rpx;
        font-weight: bold;
        .align(center);
        &.active{
            color: @mainColor;
            position: relative;
            &::after{
                content: "";
                width: 35%;
                height: 8rpx;
                background: @mainColor;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                
            }
        }
    }
}
.initing{
    width: 100%;
    line-height: 200rpx;
    text-align: center;
    color: @mainColor;
}
.art_list{
    width: 700rpx;
    height: 200rpx;
    background: #fff;
    border-radius: 15rpx;
    margin: 20rpx auto;
    box-shadow: 1px 1px 10rpx #ddd;
    padding: 20rpx;
    position: relative;
    .title{
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        width: 600rpx;
        .overflow;
    }
    .content{
        font-size: 28rpx;
        .overflow(2);
    }
    .op{
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        >i{
            margin-right: 30rpx;
            color: #666;
            font-size: 26rpx;
            &::before{
                margin-right: 10rpx;
                font-size: 32rpx;
            }
        }
        time{
            color: #ccc;
            font-size: 24rpx;
        }
        .real_op{
            margin-left: auto;
            .edit {
                color: #1544c8;
            }
            .delete {
                color: red;
            }
            i {
                font-size: 32rpx;
                font-weight: bold;
                margin-left: 40rpx;
            }
        }
    }
}


.add_art{
    width: 400rpx;
    height: 70rpx;
    font-size: 30rpx;
    border-radius: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin: 20rpx auto;
    background: @mainColor;
    color: #fff;
    position: sticky;
    bottom: 20rpx;
}

</style>